<template>
  <div>
<van-nav-bar class='title'  title="城市列表"   left-arrow   @click-left="$router.back()"/>
<van-index-bar>
  <van-index-anchor >当前城市</van-index-anchor>
  <van-cell title="上海" />
  <van-index-anchor >热门城市</van-index-anchor>
  <van-cell :title="item.label" v-for="item in list" :key="item.value" @click="hot(item)"/>
<div v-for="(item,index) in newArr" :key="index" >
  <van-index-anchor :index="item">{{item}}</van-index-anchor>
  <van-cell v-for="item in filterlist(item)" :key="item.value" :title="item.label" />
</div>
</van-index-bar>
  </div>
</template>
<script>
import request from '@/utils/request'
import {setItem} from '@/utils/storage.js'
export default {
  name: 'HaokeCitylist',

  data () {
    return {
      citylist: [],
      list: [],
      newArr: []
    }
  },

  mounted () {

  },
  created () {
    this.renderList()
    this.hotcity()
  },

  methods: {
    hot (item) {
     setItem('key', JSON.stringify(item))
      // console.log(getItem('key'))
    },
    async renderList () {
      const { body } = await request({
        url: '/area/city',
        params: {
          level: 1
        }
      })
      // console.log(body)
      this.citylist = body

      const result = body.map((item, index) => {
        // return Array.from(new Set(item.short.split('')[0].toUpperCase()))
        return item.short.split('')[0].toUpperCase()
        // 数组去重方法:Array.from(new Set(arr))
      })
      // console.log(result)
      const newArr = Array.from(new Set(result)).sort()
      // console.log(newArr)
      // newArr.sort()
      // console.log(newArr)
      this.newArr = newArr
    },
    filterlist (val) {
      return this.citylist.filter((item) => {
        return item.short.split('')[0].toUpperCase() === val
      })
    },
    async hotcity () {
      const { body } = await request({
        url: '/area/hot'
      })
      // console.log(body)
      this.list = body
    }

  }
}
</script>

<style lang="less" scoped>
.title{
  background-color:#56b27b ;
}
/deep/ .van-nav-bar__title{
  color: #fff;
}
/deep/ .van-nav-bar__left .van-icon{
  color: #fff;
}
</style>
